import { useEffect, useRef } from "react";
import * as echarts from "echarts";
const Charts = ({title, seriesType, data}) => {
  const chartRef = useRef(null);
  useEffect(() => {
    // 初始化图表
    const myChart = echarts.init(chartRef.current);
    // 准备图表参数
    const options = {
      title: {
        text: title,
      },
      xAxis: {
        type: "category",
        data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
      },
      yAxis: {
        type: "value",
      },
      series: [
        {
          data: data || [150, 230, 224, 218, 135, 147, 260],
          type: seriesType || "line",
        },
      ],
    };
    // 渲染图表
    myChart.setOption(options);
  }, []);

  return <div ref={chartRef} style={{ width: "800px", height: "600px" }}></div>;
};
export default Charts;
